<template>
  <div class="bg-white rounded-xl p-6 shadow-md card-hover">
    <h3 class="font-bold text-lg text-gray-800 mb-4">取件指南</h3>
    <div class="space-y-3">
      <div v-for="(step, index) in guideSteps" :key="index" class="flex items-start">
        <div class="bg-accent1/20 p-2 rounded-full mt-1 mr-3 flex items-center justify-center w-6 h-6">
          <span class="text-accent4 text-sm font-bold">{{ index + 1 }}</span>
        </div>
        <div>
          <h4 class="font-medium text-gray-800">{{ step.title }}</h4>
          <p class="text-sm text-gray-600 mt-1">{{ step.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PickupGuide",
  data() {
    return {
      guideSteps: [
        {
          title: '收到取件通知',
          description: '快递到达后，我们会通过短信或APP通知您'
        },
        {
          title: '前往指定地点',
          description: '根据通知信息，前往对应的快递站点或智能柜'
        },
        {
          title: '取件验证',
          description: '通过取件码、二维码或人脸识别等方式取件'
        },
        {
          title: '确认签收',
          description: '取件成功后，请确认包裹完好无损'
        }
      ]
    };
  }
};
</script>

<style scoped>
/* 组件私有样式 */
</style>